<!--
* @description 动态pdf生成
* @author zywu
* @date 2020/11/10 16:17:32
!-->
<template>
  <div style="display:none;"></div>
</template>

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
var PAGEHEIGHT = 0
var PAGEWIDTH = 0
var PAGEWIDTH_PT = 0
export default {
  data() {
    return {}
  },

  components: {},

  computed: {},

  created() {
    this.getDPI()
    PAGEWIDTH = parseInt((210 * 96) / 25.4)
    PAGEHEIGHT = parseInt((290 * 96) / 25.4)
    PAGEWIDTH_PT = this.getPt(PAGEHEIGHT)
  },

  mounted() {},

  methods: {
    create(title, id, callback) {
      this.title = title
      this.callback=callback
      this.pdf = new JsPDF('', 'pt', 'a4')

      let wrapperDom = document.getElementById(id)
      let directoryDomList = document.querySelectorAll('#' + id + ' .is-show')

      if (directoryDomList.length > 6) {
        let wrapperDom1 = wrapperDom.querySelector('#maintenReport1')
        let wrapperDom2 = wrapperDom.querySelector('#maintenReport2')
        let page1 = this.getPageNum(wrapperDom1)
        let page2 = this.getPageNum(wrapperDom2)
        this.toCanvas(wrapperDom1, page1.pageNum, page1.pageIndexArr, () => {
          this.toCanvas(
            wrapperDom2,
            page2.pageNum,
            page2.pageIndexArr,
            () => {
              this.save()
              this.revertDomStyle()
              callback(true)
            },
            false
          )
        })
      } else {
        let { pageNum, pageIndexArr } = this.getPageNum(wrapperDom)
        this.toCanvas(wrapperDom, pageNum, pageIndexArr, () => {
          this.save()
          this.revertDomStyle()
          callback(true)
        })
      }
    },
    addImage(pageData, index, imgWidth, imgHeight, pageIndexArr) {
      // TODO 有偏移
      let distance = -index * (PAGEWIDTH_PT + 11)
      // if (index > 0 && pageIndexArr.indexOf(index) > -1) {
      //   distance = -index * (PAGEWIDTH_PT + 10)
      // } else {
      //   distance = -(index - 1) * (PAGEWIDTH_PT + 10) - PAGEWIDTH_PT
      // }
      this.pdf.addImage(pageData, 'JPEG', 0, distance, imgWidth, imgHeight)
    },
    toCanvas(dom, pageNum, pageIndexArr, callback, firstPage = true) {
      html2Canvas(dom, {
        dpi: this.DPI || 96,
        useCORS: true,
      }).then((canvas) => {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let imgWidth = (PAGEWIDTH * 72) / this.DPI
        let imgHeight = ((contentHeight / (contentWidth / PAGEWIDTH)) * 72) / this.DPI
        let pageData = canvas.toDataURL('image/jpeg', 1.0)

        // 页面过大转canvas失败
        if(pageData.length<20){
          this.revertDomStyle()
          this.callback(false)
          return
        }

        for (var i = 0; i < pageNum; i++) {
          if ((firstPage && i > 0) || !firstPage) {
            this.pdf.addPage()
          }
          this.addImage(pageData, i, imgWidth, imgHeight, pageIndexArr)
        }

        callback()
      })
    },
    getPageNum(dom) {
      let pageNum = 0
      let domList = dom.querySelectorAll('.is-show .page-content')
      let domNum = domList.length
      // 记录需要设置纵向偏移的页码
      let pageIndexArr = []
      for (var i = 0; i < domNum; i++) {
        let idom = domList[i]
        let rect = idom.getBoundingClientRect()
        if (rect.height > 0) {
          pageIndexArr.push(+pageNum)
          // TODO
          if (rect.height - 50 <= PAGEHEIGHT) {
            idom.style.height = PAGEHEIGHT + 'px'
            pageNum++
          } else {
            idom.style.height = PAGEHEIGHT * Math.ceil(rect.height / PAGEHEIGHT) + 'px'
            pageNum += Math.ceil(rect.height / PAGEHEIGHT)
          }
        }
      }
      return {
        pageNum,
        pageIndexArr,
      }
    },
    revertDomStyle() {
      for (var i = 0; i < this.domNum; i++) {
        this.domList[i].style.height = ''
      }
    },
    getDPI() {
      if (window.screen.deviceXDPI != undefined) {
        this.DPI = window.screen.deviceXDPI
      } else {
        var tmpNode = document.createElement('div')
        tmpNode.style.cssText =
          'width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden'
        document.body.appendChild(tmpNode)
        this.DPI = parseInt(tmpNode.offsetWidth)
        document.body.removeChild(tmpNode)
      }
    },
    getPt(px) {
      return (px * 72) / this.DPI
    },
    save() {
      this.pdf.save(this.title + '.pdf')
    },
  },
}
</script>
<style lang='scss'>
</style>